<template>
	<view class="order">
		<!-- <view v-if="hasLogin"> -->
		<!-- 导航 -->
		<u-navbar back-text="商家售后" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<!-- <u-navbar back-icon-color="#000000" title="商家售后" title-color="#3F3F3F" :title-bold="true" :background="background"></u-navbar> -->
		<!-- end -->
		<view v-for="(ite,idx) in details" :key="idx">
			<view class="wait">
				<view class="wait1">等待商家回复</view>
				<view class="wait2">
					剩余时间 
					<u-count-down :timestamp="timestamp" font-size="26"></u-count-down>
				</view>
			</view>
			<view class="yes">
				商家已收到您的售后申请，等待商家回复，商家24小时内不回复订单自动取消，您支付的金额将会自动退回
			</view>
			<view class="line"></view>
			<view v-for="(item,index) in ite.issueRecords">
				<view class="want">
					<view style="display: flex;align-items: center;">
						<view class="wait1">{{item.issueTitle}}</view>
						<u-button type="warning" shape="circle" size="mini" style="margin-left: 34rpx;" @click="chexiao(ite.orderIssueId)">撤销申请</u-button>
					</view>
					<view class="wait2">{{item.createTime}}</view>
				</view>
				<view class="source">
				
					<view>售后原因：{{item.reason||'未填写'}}</view>
					<view style="margin-top: 24rpx;">用户描述：{{item.comments||'未填写'}}</view>
					<view v-if="item.imageList" class="clear">
						<view v-for="(it,sem) in (item.imageList)" :key="sem">
							<image :src="it" mode=""></image>
						</view>
					</view>
				</view>
				<view style="height: 140rpx;"></view>
			</view>
	
			<view class="footer">
				<view class="foot_mon">
						<u-button type="warning" shape="circle" @click="editMarket(ite.orderIssueId,ite.orderId)">修改售后信息</u-button>
				</view>
			</view>
		</view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{
					backgroundColor: '#fca800',
				},
				timestamp: 86400,
				orderId:'',
				details:''
			};
		},
		onLoad(option) {
			this.orderId = option.orderId
			console.log(this.orderId,"this.orderId")
			this.getDetail();
		},
		methods: {
			getDetail(){
				var _this = this
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'order-issue/info'
				};
				let data = {
					orderId: _this.orderId,
				};
				_this.http.httpTokenRequest(opts, data).then(res => {
					if(res.code=200){
						console.log(res.data,"售后详情")
						_this.details = res.data
					}else{
						_this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				})
			},
			editMarket(orderIssueId,orderId){
				uni.redirectTo({
					url:'cause?orderIssueId='+orderIssueId+'&orderId='+orderId
				})
			},
			chexiao(orderIssueId){
				var _this = this
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'order-issue/cancel'
				};
				let data = {
					issueId: orderIssueId,
				};
				_this.http.httpTokenRequest(opts, data).then(res => {
					if(res.code=200){
						_this.$refs.uToast.show({
							title: res.message,
							type: 'success'
						})
						setTimeout(function(){
							uni.switchTab({
								url:'../../pages/order/index'
							})
						},500)
					}else{
						_this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.wait{
		display: flex;justify-content: space-between;border-bottom: 4rpx solid #DCDCDC;padding: 32rpx 30rpx 16rpx 40rpx;
	}
	.wait1{
		color: #666666;font-size: 30rpx;
	}
	.wait2{
		color: #3F3F3F;font-size: 26rpx;
	}
	.yes{
		padding: 26rpx 36rpx 26rpx 34rpx;color: #979797;font-size: 26rpx;
	}
	.line{
		height: 12rpx;width: 100%;background-color: #E8E8E8;
	}
	.want{
		display: flex;justify-content: space-between;align-items: center;border-bottom:2rpx solid #DCDCDC;padding: 30rpx 30rpx 16rpx 40rpx;
	}
	.source{
		padding: 26rpx 0 0 34rpx;font-size: 26rpx;color: #979797;
	}
	.clear{
		display: flex;flex-wrap: wrap;margin-top: 26rpx;margin-left: 8rpx;
	}
	.clear image{
		width: 196rpx;height: 196rpx;margin:0 38rpx 38rpx 0;
	}
	.footer {
		width: 100%;
		opacity: 1;
	}
	
	.foot_mon {
		text-align: center;
		padding: 38rpx 54rpx 32rpx 54rpx;
	}
</style>
